<template>
	<app-layout>

		<app-user-center-top :top-style="userCenter.top_style" :top-pic-url="userCenter.top_pic_url" :member-pic-url="userCenter.member_pic_url"
		 :is_icon_super_vip="setting.is_icon_super_vip"></app-user-center-top>

		<view class="walletBox flex justify-center align-center">
			<block v-for="(i,index) in walletList">
				<view class="numBox flex align-center flex-direction" @click="towallet(i.balance_type)">
					<text class="walletNum">{{i.balance-0}}</text>
					<text class="walletName">{{i.type_name}}</text>
				</view>
				<view class="wline" v-if="index == 0"></view>
			</block>
		</view>

		<app-foot-box v-if="userCenter.is_foot_bar_status == 1"></app-foot-box>

		<app-vip-card></app-vip-card>

		<block v-if="userCenter.account_bar">
			<app-account-balance v-if="userCenter.account_bar.status == 1" :margin="true" :round="true" :input-user-center="userCenter"></app-account-balance>
		</block>


		<app-my-order v-if="userCenter.is_order_bar_status == 1" :margin="true" :round="true" :order_bar="userCenter.order_bar"></app-my-order>

		<jimai-order :margin="true" :round="true" :order_bar="jmOrder"></jimai-order>

		<app-my-service v-if="userCenter.is_menu_status == 1" :title="userCenter.menu_title" :menu_style="userCenter.menu_style"
		 :menus="userCenter.menus" :margin="true" :round="true"></app-my-service>

		<app-copyright v-if="copyright && copyright.status == '1'" background-color="transparent" :link="copyrightLink"
		 :pic-url="copyright.pic_url" :text="copyright.description"></app-copyright>
	</app-layout>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import AppUserCenterTop from '../../components/page-component/app-user-center-top/app-user-center-top.vue';
	import AppAccountBalance from '../../components/page-component/app-account-balance/app-account-balance.vue';
	import AppMyOrder from '../../components/page-component/app-my-order/app-my-order.vue';
	import jimaiOrder from '../../components/page-component/jimai/jimai-order.vue';
	import AppMyService from '../../components/page-component/app-my-service/app-my-service.vue';
	import AppCopyright from '../../components/page-component/app-copyright/app-copyright';
	import AppVipCard from '../../components/page-component/app-vip-card/app-vip-card';
	import AppFootBox from '../../components/page-component/app-foot-box/app-foot-box';

	export default {
		name: 'user-center',

		components: {
			AppCopyright,
			AppUserCenterTop,
			AppAccountBalance,
			AppMyOrder,
			AppMyService,
			AppVipCard,
			AppFootBox,
			jimaiOrder
		},
		data() {
			return {
				jmOrder: [{
						link_url: '/plugins/jimai/order?type=1',
						open_type: 'navigate',
						num: '',
						icon_url: require('../../static/image/WB/tyorder.png'),
						name: '体验区订单'
					},
					{
						link_url: '/plugins/jimai/order?type=2',
						open_type: 'navigate',
						num: '',
						icon_url: require('../../static/image/WB/tgorder.png'),
						name: '推广区订单'
					},
					{
						link_url: '/plugins/jimai/order?type=3',
						open_type: 'navigate',
						num: '',
						icon_url: require('../../static/image/WB/jimaiorder.png') ,
						name: '新客专享订单'
					}
				],
				walletList:''
			}
		},
		computed: {
			...mapState({
				copyright: state => state.mallConfig.copyright,
				setting: state => state.mallConfig.mall.setting,
				userCenter: state => state.userCenter.data || {},
			}),
			copyrightLink() {
				if (!this.copyright) return {};
				let {
					open_type,
					new_link_url,
					params
				} = this.copyright.link;
				return {
					openType: open_type,
					url: new_link_url,
					params: params ? params : []
				};
			}
		},
		onShow() {
			this.$event.on(this.$const.EVENT_USER_LOGIN).then(() => {
				uni.redirectTo({
					url: `/pages/user-center/user-center`
				});
			});
			if (this.$user.isLogin()) {
				this.$store.dispatch('user/refreshInfo');
			}
			this.$store.dispatch('userCenter/data');
			this.walletData()
		},
		methods: {
			walletData() {
				this.$request({
					url: this.$api.wallet.balance_list,
					data: {}
				}).then(info => {
					if (info.code == 0) {
						this.walletList = info.data
					}
				}).catch(info => {})
			},
			towallet(type) {
				if (type == 1) {
					uni.navigateTo({
						url: '/pages/WB/wallet'
					})
				}else{
					uni.navigateTo({
						url:'/pages/WB/integral'
					})
				}

			}
		}
	}
</script>
<style scoped>
	.walletNum {
		font-size: 32upx;
		font-weight: bold;
		color: #ff8120;
	}

	.walletName {
		font-size: 24upx;
		color: #aaa;
		margin-top: 10upx;
	}

	.walletBox {
		height: 160upx;
		width: 700upx;
		background: #fff;
		margin: -40upx auto 0;
		border-radius: 20upx;
	}

	.numBox {
		flex: 1;
	}

	.wline {
		width: 2upx;
		background: #aaa;
		height: 60upx;
	}
</style>
